import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { intl } from '../../../intl/intl'
import {
  ORDER_OFFSET_TYPE_OPEN, ORDER_OFFSET_TYPE_CLOSE,
  setOrderOffsetType, priceInputChange, volumeInputChange,
  inputFocus, order
} from '../../../redux/actions/tradeOrderBoardAction'

import { DIRECTION } from '../../../constants/constants'

import Button from '../../../component/button/Button'

import themeHOC from '../../common/themeHOC'

import {
  TAB_TYPE_CURRENT_POSITION, TAB_TYPE_CURRENT_ORDER,
  queryCurrentOrder, queryPosition
} from '../../../redux/actions/tradeDataQueryAction'

import { formatValue } from '../../../utils/dataUtils'

import './order-board.less'

@connect((state) => {
  return {
    currentContract: state.trade.market.get('currentContract'),
    currentOrderOffsetType: state.trade.orderBoard.get('currentOrderOffsetType'),
    price: state.trade.orderBoard.get('price'),
    volume: state.trade.orderBoard.get('volume'),
    errorTipText: state.trade.orderBoard.get('errorTipText'),

    currentDataQueryType: state.trade.dataQuery.get('currentDataQueryType'),
    currentOrderCurrentPage: state.trade.dataQuery.get('currentOrderCurrentPage')
  }
}, (dispatch) => {
  return bindActionCreators({
    setOrderOffsetType, priceInputChange, volumeInputChange, inputFocus, order,
    queryCurrentOrder, queryPosition
  }, dispatch)
})
@themeHOC
class OrderBoard extends Component {
  orderClick = direction => () => {
    const { order, currentDataQueryType, currentContract, currentOrderCurrentPage, queryCurrentOrder, queryPosition } = this.props
    order(direction, () => {
      switch (currentDataQueryType) {
        case TAB_TYPE_CURRENT_POSITION: {
          queryPosition()
          break
        }
        case TAB_TYPE_CURRENT_ORDER: {
          queryCurrentOrder(currentContract, currentOrderCurrentPage)
          break
        }
      }
    })
  }

  render () {
    const {
      theme, currentContract, currentOrderOffsetType, price, volume, errorTipText,
      setOrderOffsetType, priceInputChange, volumeInputChange, inputFocus
    } = this.props
    const isOpenPosition = currentOrderOffsetType === ORDER_OFFSET_TYPE_OPEN
    return (
      <div className={`trade-column-bottom trade-order-board-${theme}`}>
        <div className="trade-column-content-title trade-order-board-title-container">
          <span
            datatype={isOpenPosition ? 'selected' : ''}
            className="trade-column-content-title-tab trade-order-board-title-open-tab"
            onClick={() => { setOrderOffsetType(ORDER_OFFSET_TYPE_OPEN) }}>
            {intl(ORDER_OFFSET_TYPE_OPEN)}
          </span>
          <span
            datatype={!isOpenPosition ? 'selected' : ''}
            className="trade-column-content-title-tab trade-order-board-title-close-tab"
            onClick={() => { setOrderOffsetType(ORDER_OFFSET_TYPE_CLOSE) }}>
            {intl(ORDER_OFFSET_TYPE_CLOSE)}
          </span>
        </div>
        <div className="trade-order-board-input-container" style={{ marginTop: 30 }}>
          <span className="trade-order-board-input-title">
            {intl('price')}({formatValue(currentContract, 'PriceCurrency')})
          </span>
          <input
            className="trade-order-board-input"
            value={price}
            onFocus={inputFocus}
            onChange={priceInputChange}/>
        </div>
        <div className="trade-order-board-input-container">
          <span className="trade-order-board-input-title">{intl('volume')}</span>
          <input
            className="trade-order-board-input"
            value={volume}
            onFocus={inputFocus}
            onChange={volumeInputChange}/>
        </div>
        <div
          className="trade-order-board-trade-volume-tip-container">
          <span
            datatype="long"
            className="trade-order-board-trade-volume-tip">
            {isOpenPosition ? intl('can_open_long') : intl('long_position_can_close')}
            <span>&nbsp;--&nbsp;{intl('sheet')}</span>
          </span>
          <span
            datatype="short"
            className="trade-order-board-trade-volume-tip">
            {isOpenPosition ? intl('can_open_short') : intl('short_position_can_close')}
            <span>&nbsp;--&nbsp;{intl('sheet')}</span>
          </span>
        </div>
        <p className="trade-order-board-error-tip-text">{errorTipText}</p>
        <div className="trade-order-board-button-container">
          <Button
            datatype="buy"
            className="trade-order-board-button"
            onClick={this.orderClick(DIRECTION.BUY)}>
            {isOpenPosition ? intl('buy_open_long') : intl('buy_close_short')}
            {isOpenPosition && <span>{intl('bullish')}</span>}
          </Button>
          <Button
            datatype="sell"
            className="trade-order-board-button"
            onClick={this.orderClick(DIRECTION.SELL)}>
            {isOpenPosition ? intl('sell_open_short') : intl('sell_close_long')}
            {isOpenPosition && <span>{intl('bearish')}</span>}
          </Button>
        </div>
      </div>
    )
  }
}

export default OrderBoard
